<template>
  <view class="register">
    <view class="register-container">
      <view class="register-box" :class="{ 'smooth-bounce-in': isBounced }">
        <view class="register-title">
          <text>欢迎注册</text>
        </view>
        <view class="register-describe">
          <text>欢迎注册</text>
        </view>
        <view class="register-form">
          <view class="register-input">
            <uni-easyinput prefixIcon="person"
                           v-model="registerInfo.code"
                           placeholder="请输入内容"
                           :clearable="false"/>
          </view>
          <view class="register-input">
            <uni-easyinput prefixIcon="locked"
                           v-model="registerInfo.password"
                           placeholder="请输入内容"
                           type="password"
                           :clearable="false"/>
          </view>
          <view class="register-input">
            <uni-easyinput prefixIcon="paperplane"
                           v-model="registerInfo.timeCode"
                           placeholder="请输入验证码"
                           :clearable="false" />
            <button size="mini" @click="getTimeCode()" class="register-btn-code">获取验证码</button>
          </view>
          <view class="register-checkbox">
            <checkbox value="cb" checked="false" color="#6E64F8FF" style="transform:scale(0.7)" />我已阅读并同意
          </view>
          <button class="register-btn" @click="onSubmit()">注册</button>
          <view class="register-box-footer">
            <text @click="toLogin">已有账号？立即登录</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {getTimeCodeAPI, registerAPI} from "../../api/UserAPI";

const registerInfo = ref({
  code: '',
  timeCode: '',
  password: '',
  registerType: 3
})

const toLogin = () => {
  uni.redirectTo({url: '/pages/login/login'})
}

const isBounced = ref(false)

/* 获取验证码的异步函数 */
async function getTimeCode() {
  // 提取注册信息
  const {code} = registerInfo.value;

  // 验证邮箱或手机号不为空
  if (!code) {
    await uni.showToast({
      title: '请输入手机号或邮箱',
      icon: 'none',
    });
    return;
  }

  // 定义正则表达式和注册类型常量
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const mobileRegex = /^1[3-9]\d{9}$/; // 适用于中国大陆的手机号

  // 判断注册类型
  if (emailRegex.test(code)) {
    registerInfo.value.registerType = 3; // 邮箱登录
  } else if (mobileRegex.test(code)) {
    registerInfo.value.registerType = 2; // 手机号登录
  } else {
    await uni.showToast({
      title: '请检查手机号或邮箱格式',
      icon: 'none',
    });
    return;
  }

  try {
    // 调用API获取验证码
    const resp = await getTimeCodeAPI(registerInfo.value);
    await uni.showToast({
      title: resp.msg,
      icon: 'none',
    });
  } catch (error) {
    // 处理错误情况
    console.error('获取验证码失败', error);
    await uni.showToast({
      title: '获取失败，请稍后再试',
      icon: 'none',
    });
  }
}

/* 注册 */
async function onSubmit() {
  // 判断输入是否为空
  if (!registerInfo.value.code || !registerInfo.value.password || !registerInfo.value.timeCode) {
    await uni.showToast({
      title: '请输入完整信息',
      icon: 'none',
    });
    return;
  }

  const resp = await registerAPI(registerInfo.value)
  if (resp.code === 200) {
    await uni.showToast({
      title: resp.msg,
      icon: 'none',
    });
    setTimeout(() => {
      uni.redirectTo({url: '/pages/login/login'})
    }, 1000)
  } else {
    await uni.showToast({
      title: resp.msg,
      icon: 'none',
    });
  }
}

onMounted(() => {
  isBounced.value = true
})
</script>

<style scoped lang="scss">
@import "../../style/index.scss";

@keyframes smoothBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.smooth-bounce-in {
  animation: smoothBounceIn 0.5s ease-out forwards;
}

.register {
  width: 100vw;
  height: 100vh;
  background:
      linear-gradient(to bottom, transparent -100px, #fff 35vw),
      linear-gradient(to right, #ffd1de 30vw, #6e64f8);

  .register-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .register-box {
      width: 90%;
      max-width: 500px;
      height: auto;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 3px 3px rgba(216, 216, 216, 0.2);
      padding: 20px;
      box-sizing: border-box;

      .register-title {
        font-weight: bold;
        color: $an-text-color;
        font-size: 1.4em;
      }

      .register-describe {
        margin-top: 2.5vh;
        font-size: 1em;
        color: $an-text-color;
      }

      .register-form {
        margin-top: 3vh;

        .register-input {
          display: flex;
          margin-top: 1.5vh;
        }

        .register-btn {
          margin-top: 8vh;
          width: 100%;
          font-size: $an-font-size-base;
          background: $an-color-primary;
          color: $an-text-color-inverse;
        }

        .register-btn-code{
          margin-left: 5px;
          font-size: $an-font-size-base;
          background: $an-bg-color;
          color: $an-text-color;
          border-radius: $an-border-radius-base;
          display: flex;
          align-items: center;
        }

        .register-checkbox{
          margin-top: 1.5vh;
          font-size: $an-font-size-base;
          color: $an-text-color;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
    }

    .register-box-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5vh;

      text {
        color: $an-text-color;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }
}
</style>
